<template>
  <div>
    <div class="top">
      <van-search v-model="value" shape="round" placeholder="请输入搜索关键词" @update:model-value="onSearch" />
    </div>
    <div class="content">
      <van-row>
        <van-col span="8">
          <h4>历史</h4>
          <van-tag closeable size="medium" type="primary" @close="close(item.id)"
            v-show="historyList.length == 0 ? false : true" v-for="item in historyList" :key="item.id">
            <p @click="dianBiao">{{ item.newValue }}</p>
          </van-tag>
        </van-col>
      </van-row>
      <van-empty image="search" description="未搜到相关内容" v-show="searchData.length == 0 ? true : false" />
      <ul :v-show="searchData.length == 0 ? false : true">
        <li class="lis" v-for="item in searchData" :key="item.id"
          @click="$router.push({ path: '/goods', query: { data: JSON.stringify(searchData),val:JSON.stringify(value) } })">{{ item.title }}</li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';
const $route = useRoute()

// 输入框绑定
const value = ref('');
// 存储搜索的数据
const searchData = ref([])
// 获取到列表跳转过来的数据
let data = ref(JSON.parse($route.query.data));
// 搜索的历史记录
let historyList = ref([{ id: 1, newValue: '香蕉' }])
// 删除历史记录
let close = (id) => {
  // 找到点击的历史记录的id
  let index = historyList.value.filter(item => item.id == id)
  // 进行删除
  historyList.value.splice(index, 1)
}
// 点击历史记录
let dianBiao = (e) => {
  value.value = e.target.innerText
}

// 当输入框输入数据时触发
const onSearch = (value: string) => {
  // 不能直接搜索到原数据，储存到新的数组中查找
  let newData = [...data.value]
  // 过滤出查找到的数据
  newData = data.value.filter(item => item.title.includes(value))
  // 判断输入框是否为空
  // 输入框为空时，清空搜索的数据
  if (value == '') {
    newData = []
    searchData.value = []
  } else {
    // 输入框不为空时，储存到搜索的数据中
    searchData.value = newData
  }
}

// 监听输入框值发生变化
watch(value, (newValue) => {
  // 判断输入框的值是否为空
  if (newValue !== '') {
    // 如果存储的历史记录信息长度为0
    if (historyList.value.length == 0) {
      // 储存输入框的值到历史记录
      historyList.value.unshift({
        id: new Date().getTime(),
        newValue: newValue
      })
      // 如果为空
    } else {
      // 查找出历史记录是否和新输入框的值相同，如果长度为不为0
      if (historyList.value.filter(item=>item.newValue.includes(newValue)).length!==0) {
        // 查找出相同的历史记录的索引
        let index = historyList.value.indexOf(historyList.value.filter(item=>item.newValue.includes(newValue))[0])
        // 删除相同的历史记录
        historyList.value.splice(index, 1)
        // 将新的值存储在第一项
        historyList.value.unshift({
        id: new Date().getTime(),
        newValue: newValue
      }) 
      // 如果长度为0
      }else{
        // 直接添加在历史记录
        historyList.value.unshift({
        id: new Date().getTime(),
        newValue: newValue
      })
      }
    }
  }
})

</script>

<style scoped>
.content {
  margin-top: 55px;
}

.lis {
  width: 100%;
  height: 30px;
  line-height: 30px;
  margin: 10px;
  border-bottom: 1px solid #ccc;
}
</style>